<template>
  <el-card>
    <div class="top">
      <el-button type="primary" plain @click="handleOpenDialog"
        >注册无人机</el-button
      >
      <el-button type="danger" plain>删除无人机</el-button>
    </div>
    <div>
      <el-dialog
        title="注册无人机"
        center
        :visible.sync="outVisible"
        :before-close="outClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="140px"
          class="demo-ruleForm"
        >
          <el-form-item label="无人机名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="无人机序列号" prop="region">
            <el-select
              v-model="ruleForm.region"
              placeholder="请选择无人机序列号"
            >
              <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="推流验证用户名" prop="ID">
            <el-input v-model="ruleForm.ID"></el-input>
          </el-form-item>
          <el-form-item label="推流验证密码" prop="password">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="推流地址" prop="address">
            <el-input v-model="ruleForm.address"></el-input>
          </el-form-item>
          <el-form-item label="无人机管理员" prop="person">
            <el-select
              v-model="ruleForm.person"
              placeholder="请选择无人机管理员"
            >
              <el-option label="秦岭" value="ql"></el-option>
              <el-option label="陆昊" value="lh"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即注册</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <div class="data">
        <el-table
          :data="tableData"
          :height="390"
          :row-style="{ height: '40px' }"
          style="width: 100%; font-size: 22px"
          :header-cell-style="{ background: '#f4f3f9', color: '#606266' }"
        >
          <el-table-column prop="name" label="名称" width="390" align="center">
          </el-table-column>
          <el-table-column
            prop="navid"
            label="无人机ID"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="person"
            label="无人机管理员"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="推流地址"
            width="390"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="time"
            label="注册时间"
            width="390"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="operate"
            label="状态"
            width="390"
            align="center"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-card>
</template>
  
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          person: "秦岭",
          address: "rtmp://47.100.121.5:1935/myapp/1",
          time: "2022-10-11",
          operate: "良好",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "DMQ013SFA91NAS",
          person: "秦岭",
          address: "rtmp://47.100.121.5:1935/myapp/2",
          time: "2022-10-11",
          operate: "良好",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "MO782B1JOI8SAF",
          person: "陆昊",
          address: "rtmp://47.100.121.5:1935/myapp/3",
          time: "2022-10-11",
          operate: "良好",
        },
      ],
      outVisible: false,
      ruleForm: {
        name: "",
        ID: "",
        password: "",
        address: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入无人机名称", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur",
          },
        ],
        ID: [
          { required: true, message: "请输入推流验证用户名", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入推流验证密码", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符，为数字和字母组合",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请输入推流地址", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "长度在 5 到 20 个字符",
            trigger: "blur",
          },
        ],
        person: [
          { required: true, message: "请选择无人机管理员", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    handleOpenDialog() {
      this.outVisible = true;
    },
    outClose(done) {
      this.$confirm("确认关闭", "提示框")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleEdit(row) {
      this.formData = row;
      this.innerVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
  
  <style scoped>
.data {
  margin-top: 20px;
}
</style>